<template>
  <div>
    <h1>欢迎</h1>
    <el-divider></el-divider>
    <h2>使用说明</h2>
    <h3 style="margin-top: 15px">一，文档预览</h3>
    <ul style="margin-top: 5px">
      <li>1，参考导航页 =>文档列表</li>
      <li>
        2，主要就是
        <span style="color: red"
          >this.Z_yl_iframe =
          "https://view.officeapps.live.com/op/view.aspx?src=" +
          data.file;</span
        >这一行代码
      </li>
      <li style="color: red">3，注意事项：文档地址一定要在公网能访问到</li>
      <li>
        4，官网地址=><el-link
          href="https://www.microsoft.com/en-us/microsoft-365/blog/2013/04/10/office-web-viewer-view-office-documents-in-a-browser/"
          type="primary"
          >网址</el-link
        >
      </li>
    </ul>
    <h3 style="margin-top: 25px">二，打印/下载</h3>
    <h4 style="margin-top: 5px">2.1，打印</h4>
    <div>
      主要使用<span style="color: red"><b>window.print()</b></span
      >浏览器自带。如果直接使用会 打印整个网页，我们是想要打印某个部分
    </div>
    <div>
      实现思路：把需要打印的内容传到一个空白页面（要在路由中注册），渲染成功后再执行打印。这里用到views文件夹中的printPage页面
    </div>
    <h4 style="margin-top: 10px">2.2，导出</h4>
    <div>安装插件: npm install vue-json-excel</div>
    <div>在页面中引入组件使用:</div>
    <div>import JsonExcel from 'vue-json-excel'</div>
    <h3 style="margin-top: 25px">三，可视化</h3>
    <div>安装</div>
    <div>npm install echarts vue-echarts</div>
    <div>npm i -D @vue/composition-api</div>
    <div>
      官网地址:<el-link
        href="https://www.npmjs.com/package/vue-echarts"
        type="primary"
        >网址</el-link
      >
    </div>
    <div>ECharts 官网:<el-link
        href="https://echarts.apache.org/zh/index.html"
        type="primary"
        >网址</el-link
      ></div>
    <div>使用的是按需加载,并非全局引入</div>
    <h4 style="margin-top: 5px">3.1，扇形图</h4>
    <div>import { PieChart } from "echarts/charts";此为扇形图</div>
    <h4 style="margin-top: 5px">3.2，条形图</h4>
    <div>import { BarChart } from "echarts/charts";此为条形图</div>
    <div>import { LineChart } from "echarts/charts";此为折线图</div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  mounted() {
    console.log(this.$store.state.test);
  },
};
</script>
<style scoped>
ul li {
  margin-top: 5px;
}
</style>